<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>

<div class="nav">
    联机五⼦棋
</div>
<div class="login-container">
    <div class="login-dialog">
        <!-- 标题 -->
        <h3>注册</h3>
        <!-- 输⼊⽤⼾名 -->
        <div class="row">
            <span>⽤⼾名</span>
            <input type="text" id="username" name="username">
        </div>
        <!-- 输⼊密码 -->

        <div class="row">
            <span>密码</span>
            <input type="password" id="password" name="password">
        </div>
        <!-- 提交按钮 -->
        <div class="row submit-row">
            <button id="submit">提交</button>
        </div>
    </div>
</div>

<script src="./js/jquery.min.js"></script>
<script>
        // 1. 先获取到⽤⼾名和密码
        let username = document.querySelector('#username');
        let password = document.querySelector('#password');
        let submitButton = document.querySelector('#submit');
        submitButton.onclick = function (){
            $.ajax({
                method: 'post',
                url: '/register',
                data: {
                    username: username.value,
                    password: password.value
                },
                success: function(body) {
                    if (body && body.username) {
                        // 注册成功,返回新注册好的对象 跳转到游戏⼤厅
                        alert('注册成功!')
                        location.replace('/login.html');
                    } else {
                        alert("注册失败!");
                    }


                }
            });
        }



</script>


</body>
</html>